<template>
  <div class="wrapper">
    <div class="left-page">
      <div class="cell-row">
        <DBRow/>
        <YJRow/>
      </div>
      <div class="cell-row">
        <SJJL/>
        <DBJL/>
      </div>
    </div>
    <div class="right-page">
      <div class="msg-center-row">
        <div class="label-line">消息中心</div>
        <!-- <div class="label-line" @click="keyFun(websocketData)">消息中心</div> -->
        <div class="row-line"></div>
        <div class="input-row">
          <input placeholder="搜索来电..." class="search-input" type="text" v-model="request.keyword">
          <img src="../../assets/8512345/search.png" class="search-icon" alt="搜索" @click="search">
        </div>
      </div>
      <div class="year-row">
        <img src="../../assets/8512345/time.png" alt>
        <span
          class="year-text"
        >{{request.endTime?request.endTime.substring(0,4):(new Date()).getFullYear()}}年</span>
      </div>
      <div class="date-row">
        <div class="date-num">&nbsp;</div>
        <!-- <div class="date-num">{{getTime()}}</div> -->
        <div class="select-date-row">
          <!-- <span style="white-space:nowrap">日期：</span> -->
          <div class="date-wrapper flex">
            <!-- <el-date-picker size="small" class="date-wrapper" v-model="timeHorizon" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker> -->
            <el-date-picker
              size="small"
              placeholder="开始日期"
              v-model="request.startTime"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="date"
              @change="search"
            ></el-date-picker>
            <span class="date-t">至</span>
            <el-date-picker
              size="small"
              placeholder="结束日期"
              v-model="request.endTime"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="date"
              @change="search"
            ></el-date-picker>
          </div>
        </div>
      </div>
      <ul class="time-line-container" id="xxzxList">
        <li v-for="(item,index) in XxzxList" :key="index" class="time-line">
          <div class="time-line-label">
            {{getTimeStr(item.startTime,'yyyy-MM-dd')||'-'}}
            <br>
            {{getTimeStr(item.startTime,'hh:mm:ss')||'-'}}
          </div>
          <div class="time-line-content">
            <div class="content-container">
              <div class="tel-row">
                <div class="flex item-center">
                  <img src="../../assets/8512345/tel.png" alt>
                  <span class="tel-text">电话</span>
                </div>
                <div class="flex item-center">
                  <button
                    v-if="!item.eventId"
                    style="margin-right:10px"
                    class="handle-btn target"
                    @click="openDialog('bjDialog',{item})"
                  >标记</button>
                  <!-- <button>
                    <img src="../../assets/8512345/delete.png" alt>
                  </button>-->

                  <!-- <button>
                                        <img class="reset-audio" src="../../assets/8512345/reset.png" alt="">
                                        <span class="reset-text">重听</span>
                                    </button>
                  <button class="handle-btn callback">回电</button>-->
                </div>
              </div>
              <div class="source-row">
                <div class="flex1">
                  <span class="source-label">来源：</span>
                  <span>{{item.telOtherNum}}</span>
                </div>
                <div class="flex1">
                  <span class="source-label">本机号码：</span>
                  <span>{{item.telMyNum}}</span>
                </div>
              </div>
              <div class="delete-row">
                <audio v-if="item.filePath" controls controlslist="nodownload" preload="meta">
                  <source :src="item.filePath" type="audio/mpeg">
                </audio>
                <div v-else class="no-status">
                  <div style="font-size:12px;color:#aaa">暂无录音</div>
                  <div v-if="item.isAnswer==0" class="weijieting">未接听</div>
                </div>
                <!-- <img src="../../assets/8512345/delete.png" alt=""> -->
              </div>
            </div>
          </div>
        </li>
        <div class="roll-more" v-if="XxzxList.length&&isMore">
          向下滚动加载更多
          <i :class="scrollFlag?'el-icon-loading':'el-icon-more'"></i>
        </div>
      </ul>
    </div>
    <SearchDialog :list="searchList"/>
    <InComingTipDialog @callback="getXxzxList"/>
    <BjDialog @callback="getXxzxList"/>
  </div>
</template>
<script>
import Pubsub from "../../utils/pubsub";
import { getTimeStr, addScrollEvent } from "../../utils/index";
import { telephoneFindPage, pushWebSocket } from "../../config/api.js";

import LabelRow from "../../components/8512345/labelRow.vue";
import DBRow from "../../components/8512345/dbRow.vue"; //待办事项
import YJRow from "../../components/8512345/yjRow.vue"; //预警提醒
import SJJL from "../../components/8512345/sjjl.vue"; //办事指南
import DBJL from "../../components/8512345/dbjl.vue"; //我的寄件
import MyStat from "../../components/8512345/myStat.vue"; //我的统计
import TakeNumber from "../../components/8512345/takeNumber.vue"; //取号情况
import Chests from "../../components/8512345/chests.vue"; //智能柜使用情况
import SearchDialog from "../../components/8512345/searchDialog.vue"; //查询办件弹窗
import InComingTipDialog from "../../components/8512345/incomingTipDialog"; //来电提醒
import BjDialog from "../../components/8512345/bjDialog"; //标记弹窗
export default {
  components: {
    LabelRow,
    DBRow,
    YJRow,
    SJJL,
    DBJL,
    MyStat,
    TakeNumber,
    SearchDialog,
    InComingTipDialog,
    BjDialog,
    Chests
  },
  data() {
    return {
      websocketData: {
        agentUuid: "03c38368-fa41-4219-a9d6-fe90047d83ca",
        contacts: "未知",
        endTime: 1561121094000,
        eventId: "",
        fileId: null,
        filePath: null,
        id: "89d337e0888f45dn814e470b00cf32e2",
        isAnswer: "0",
        isDownload: "0",
        startTime: 1559198082000,
        telAnswerUserId: "_XzWysF9eEem-HLrFCyMnNA",
        telMyNum: "5209363",
        telOtherNum: "9015008286625",
        telTalkTime: null,
        type: "i"
      },
      getTimeStr,
      searchList: [],
      keywords: "",
      timeHorizon: "",
      XxzxList: [],
      scrollFlag: false, //是否滚动到底部，
      isMore: true, //是否最后一页
      totalPage: 1, //总页数
      request: {
        pageNum: 1,
        pageSize: 10,
        startTime: "",
        endTime: "",
        keyword: ""
      }
    };
  },
  mounted() {
    //websocket消息进来弹窗
    this.pubsub_token1 = Pubsub.subscribe("ZHZX_TEL_CALLING", (t, args) => {
      this.keyFun(args);
    });
    this.pubsub_token1 = Pubsub.subscribe(
      "ZHZX_WORKBENCH_TELEPHONE_RECORD",
      (t, args) => {
        this.getXxzxList();
      }
    );
    setTimeout(() => {
      addScrollEvent("xxzxList", this.handleScroll);
    }, 0);
    this.getXxzxList();
  },
  destroyed() {
    this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
  },
  methods: {
    // search() {
    //   Pubsub.publish("showSearchDialog", { keywords: this.keywords });
    // },
    open() {
      this.instance = this.$notify({
        title: "提示",
        message: "这是一条不会自动关闭的消息",
        duration: 0
      });
    },
    close(id) {
      this["instance" + id].close();
    },
    keyFun(item) {
      // pushWebSocket({type:"ZHZX_TEL_CALLING"})
      const h = this.$createElement;
      this["instance" + item.id] = this.$notify.info({
        title: `来源：${item.telOtherNum || "未知"}`,
        duration: 0,
        showClose: false,
        onClick: this.notifyClick.bind(this, item),
        message: h(
          "div",
          { style: "cursor: pointer;min-width:289px;min-height:21px" },
          `本机号码：${item.telMyNum || "-"}`
        )
      });
    },
    notifyClick(item) {
      this.openDialog("showInComingTipDialog", item);
      this.close(item.id);
    },
    getTime() {
      let date = new Date();

      return `${date.getMonth() + 1}.${date.getDate()}`;
    },
    search(e) {
      if (
        (this.request.startTime && this.request.endTime) ||
        (!this.request.startTime && !this.request.endTime)
      ) {
        this.getXxzxList();
      }
    },
    //滚动加载函数
    handleScroll: function(h1, h2) {
      if (this.scrollFlag) {
        return;
      }
      if (h1 > h2) {
        let { pageNum } = this.request;
        if (pageNum < this.totalPage) {
          ++this.request.pageNum;
          this.scrollFlag = true;
          this.getXxzxList(true);
        } else {
          this.isMore = false;
        }
      }
    },
    getXxzxList(isMore) {
      console.log(123);
      this.scrollFlag = false;
      const { request, XxzxList } = this;
      telephoneFindPage(request).then((res = {}) => {
        this.XxzxList = isMore ? XxzxList.concat(res.rows) : res.rows;
        this.totalPage = Math.ceil(res.total / request.pageSize) || 1;
      });
    },
    openDialog(type, values) {
      Pubsub.publish(type, values);
    }
  }
};
</script>

<style lang="scss" scoped>
.roll-more {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding: 10px 10px 5px;
  color: #a2a2a2;
  /* cursor: pointer; */
  i {
    font-size: 22px;
  }
}
.wrapper {
  display: flex;
  // align-items: center;
}
.search-row {
  display: flex;
  margin-bottom: 30px;
}
.left-page {
  flex: 2;
  padding: 20px 30px 20px 20px;
  .search-label {
    height: 58px;
    width: 150px;
    background: #004293;
    color: #fff;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  .input-row {
    flex: 1;
    display: flex;
    position: relative;
    input {
      flex: 1;
      font-size: 16px;
      padding-left: 20px;
      padding-right: 145px;
    }
    .search-btn-row {
      position: absolute;
      display: flex;
      align-items: center;
      right: 0;
    }
    .search-btn {
      background: #822424;
      height: 57px;
      padding: 0 12px;
      &:active {
        opacity: 0.8;
      }
    }
  }
  .cell-row {
    display: flex;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.right-page {
  flex: 1;
  background: #fff;
  padding: 30px 20px 20px 30px;
  .msg-center-row {
    display: flex;
    align-items: center;
  }
  .label-line {
    padding-left: 15px;
    position: relative;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    margin-right: 20px;
    color: #1a36a9;
    &::before {
      content: "";
      display: block;
      position: absolute;
      height: 100%;
      width: 3px;
      background: #272c67;
      left: 0;
    }
  }
  .row-line {
    flex: 1;
    height: 1px;
    background: #e5e5e5;
  }
  .search-input {
    height: 32px;
    border-radius: 3px;
    border: solid 1px #c9c9c9;
    padding-left: 12px;
    padding-right: 36px;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
  }
  .input-row {
    flex: 1;
    position: relative;
  }
  .search-icon {
    position: absolute;
    right: 8px;
    padding: 7px 3px;
    cursor: pointer;
    top: 0;
  }
  .year-row {
    margin-top: 20px;
    padding-left: 72px;
    display: flex;
    align-items: center;
    .year-text {
      color: #1a36a9;
      margin-left: 10px;
      position: relative;
      &:after {
        position: absolute;
        top: 7px;
        right: -15px;
        content: "";
        display: block;
        height: 0;
        width: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #000;
      }
    }
  }
  .date-row {
    display: flex;
    align-items: center;
  }
  .date-num {
    width: 70px;
    text-align: right;
    padding-right: 17px;
    position: relative;
    padding-bottom: 10px;
    &::before {
      content: "";
      display: block;
      position: absolute;
      height: 13px;
      width: 13px;
      background: #fff;
      border-radius: 50%;
      top: 4px;
      right: -7px;
    }
    &:after {
      content: "";
      display: block;
      position: absolute;
      height: 16px;
      width: 16px;
      border: 3px solid #1a36a9;
      box-sizing: border-box;
      border-radius: 50%;
      right: -9px;
      top: 2px;
    }
  }
  .select-date-row {
    flex: 1;
    border-left: 2px solid #eaeaea;
    padding-left: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .date-wrapper {
    width: 300px;
    padding-bottom: 10px;
  }
  .date-t {
    margin: 0 10px;
    line-height: 32px;
  }
  .time-line {
    display: flex;
    &-label {
      width: 70px;
      text-align: right;
      padding-right: 17px;
      padding-top: 10px;
      position: relative;
      font-size: 12px;
      &:after {
        content: "";
        display: block;
        position: absolute;
        height: 10px;
        width: 10px;
        background: #b5b5b5;
        border-radius: 50%;
        top: 14px;
        right: -6px;
        z-index: 999;
      }
    }
    &-content {
      flex: 1;
      border-left: 2px solid #eaeaea;
      padding-bottom: 10px;
      padding-left: 24px;
      display: flex;
      position: relative;
    }
    .content-container {
      background: #f2f3ff;
      flex: 1;
      padding: 10px;
      position: relative;
      &:after {
        content: "";
        display: block;
        position: absolute;
        height: 0;
        width: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #f2f3ff;
        left: -10px;
        top: 10px;
      }
    }
    .tel-row {
      display: flex;
      justify-content: space-between;
    }
    .reset-audio {
      display: inline-block;
      vertical-align: bottom;
    }
    .tel-text {
      color: #1a36a9;
      margin-left: 15px;
    }
    .reset-text {
      font-size: 12px;
      margin-left: 5px;
    }
    .handle-btn {
      width: 51px;
      height: 26px;
      border-radius: 3px;
      margin-left: 10px;
      &.callback {
        background: #dcdcdc;
      }
      &.target {
        background: #1a36a9;
        color: #fff;
      }
    }
    .source-row {
      display: flex;
      margin-top: 20px;
    }
    .source-label {
      color: #666;
    }
    .delete-row {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      align-items: center;
    }
  }
  .time-line-container {
    max-height: 594px;
    overflow: auto;
  }
  audio {
    height: 12px;
    flex: 1;
  }
}
.no-status {
  flex: 1;
  display: flex;
  justify-content: space-between;
  .weijieting {
    color: red;
  }
}
</style>
